import React from "react";
import { Form, Input, Button, Radio, message } from "antd";
import { useNavigate } from "react-router";
import "../../AuthForm.css"; // 导入自定义样式文件

const RegisterPage = () => {
  const navigate = useNavigate();

  const onFinish = (values) => {
    console.log("Register Success:", values);
    navigate("/main");
  };

  const onLogin = () => {
    navigate("/login");
  };

  return (
    <div className="auth-container">
      <div className="auth-form">
        <h2>注册</h2>
        <Form onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="phone"
            rules={[{ required: true, message: "请输入电话" }]}
          >
            <Input placeholder="电话" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="密码" />
          </Form.Item>
          <Form.Item
            name="address"
            rules={[{ required: true, message: "请输入地址" }]}
          >
            <Input placeholder="地址" />
          </Form.Item>
          <Form.Item
            name="gender"
            rules={[{ required: true, message: "请选择性别" }]}
          >
            <Radio.Group>
              <Radio value="male">男</Radio>
              <Radio value="female">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              注册
            </Button>
            <Button onClick={onLogin}>返回登录</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default RegisterPage;
